<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">设置</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="chart-peity.html#">下拉菜单1</a>
                        <a class="dropdown-item" href="chart-peity.html#">下拉菜单2</a>
                        <a class="dropdown-item" href="chart-peity.html#">下拉菜单3</a>
                        <a class="dropdown-item" href="chart-peity.html#">下拉菜单4</a>
                    </div>
                </div>

                <h4 class="page-title">饼状图</h4>
                 <p class="text-muted page-title-alt">欢迎ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-30 header-title"><b>饼状图</b></h4>

                    <table class="table">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>
                                <span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">1/5</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;1/5&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">226/360</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;226/360&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pie" data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;0.52/1.561&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pie" data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">1,4</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;1,4&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pie" data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">226,134</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;226,134&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pie" data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">0.52,1.041</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;0.52,1.041&lt;/span&gt;</code>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-30 header-title"><b>圆环图</b></h4>

                    <table class="table">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">1/5</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;1/5&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">226/360</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;226/360&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;0.52/1.561&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">1,4</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;1/4&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">226,134</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;226,134&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="donut" data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30">1,2,3,2,2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-donut" data-colors="#5fbeaa,#ebeff2" data-width="30" data-height="30"&gt;1,2,3,2,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- end row -->




        <div class="row">
            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-30 header-title"><b>线和杆图</b></h4>

                    <table class="table">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
                            </td>
                            <td>
                                <code>&lt;span class="updating-chart"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="120" data-height="40">5,3,9,6,5,9,7,3,5,2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="100" data-height="40"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="120" data-height="40">5,3,2,-1,-3,-2,2,3,5,2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="100" data-height="100"&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="120" data-height="40">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-line" data-fill="#5fbeaa" data-stroke="#169c81" data-width="100" data-height="100"&gt;0,-3,-6,-4,-5,-4,-7,-3,-5,-2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-bar" data-colors="#5fbeaa,#ebeff2" data-width="100" data-height="30">5,3,9,6,5,9,7,3,5,2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-bar" data-colors="#5fbeaa,#ebeff2" data-width="100" data-height="30"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-bar" data-colors="#5fbeaa,#ebeff2" data-width="100" data-height="30">5,3,2,-1,-3,-2,2,3,5,2</span>
                            </td>
                            <td>
                                <code>&lt;span data-plugin="peity-bar" data-colors="#5fbeaa,#ebeff2" data-width="100" data-height="30"&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-30 header-title"><b>图表数据属性</b></h4>

                    <table class="table">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"], "innerRadius": 24, "radius": 30 }'>6/7</span>
                            </td>
                            <td>
                                <code>
                                    &lt;span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"],  "innerRadius": 24, "radius": 30 }'"&gt;6/7&lt;/span&gt;
                                </code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5fbeaa", "#ebeff2"],  "innerRadius": 18, "radius": 28 }'>4/7</span>
                            </td>
                            <td>
                                <code>
                                    &lt;span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5fbeaa", "#ebeff2"],  "innerRadius": 18, "radius": 28 }'"&gt;4/7&lt;/span&gt;
                                </code>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"],   "innerRadius": 20, "radius": 24 }'>5/7</span>
                            </td>
                            <td>
                                <code>
                                    &lt;span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"],  "innerRadius": 20, "radius": 24 }'"&gt;5/7&lt;/span&gt;
                                </code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#fb6d9d", "#ebeff2"], "innerRadius": 18, "radius": 20 }'>6/7</span>
                            </td>
                            <td>
                                <code>
                                    &lt;span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#fb6d9d", "#ebeff2"],  "innerRadius": 18, "radius": 20 }'"&gt;6/7&lt;/span&gt;
                                </code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#7266ba", "#ebeff2"], "innerRadius": 18, "radius": 20 }'>5/7</span>
                            </td>
                            <td>
                                <code>
                                    &lt;span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#7266ba", "#ebeff2"],  "innerRadius": 18, "radius": 20 }'"&gt;5/7&lt;/span&gt;
                                </code>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- end row -->

                    
        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="../plugins/peity/jquery.peity.min.js"></script>
        <script src="assets/pages/jquery.peity.init.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>